<template>
  <div>
    <ze-scroll class="good-scroll" :exclude-tabbar="true" @scrolltolower="handleScrolltolower">
      <van-tabs :active="active" class="test" title-active-color="#739ECA" title-inactive-color="#666" color="#739ECA" line-height="2px" @change="changeTab">
        <van-tab title="全部" :info="allInfo">
          <one-good :all-list="allList" />
        </van-tab>
        <van-tab title="已用" :info="usedInfo">
          <one-good :all-list="allList" />
        </van-tab>
        <van-tab title="未用" :info="unusedInfo">
          <one-good :all-list="allList" />
        </van-tab>
        <van-tab title="维修" :info="mainInfo">
          <one-good :all-list="allList" />
        </van-tab>
      </van-tabs>
    </ze-scroll>
  </div>
</template>
<script>
import oneGood from './one-good.vue'
import { getGoodsList } from '@/apis/office'
import ZeScroll from '@/components/ze-scroll/index.vue'
export default {
  components: { oneGood, ZeScroll },
  onLoad(option) {
    this.option = JSON.parse(decodeURIComponent(option.param))
  },
  onReady() {
    if (this.option.itemName) {
      uni.setNavigationBarTitle({
        title: this.option.itemName,
      })
    }
  },
  data() {
    return {
      finished: false,
      status: 'more',
      pageNo: 1,
      loading: true,
      tipsNum: 1,
      active: 0,
      option: {},
      tabs: [
        { title: 'Tab 1', info: { text: '3', bgColor: '#FF0000' } },
        { title: 'Tab 2', info: { text: '7', bgColor: '#000' } },
        // 其他 tab 类似
      ],
      // 全部
      allList: [],
      // 全部的数字
      allInfo: 0,
      // 已用数字
      usedInfo: 0,
      // 未用数字
      unusedInfo: 0,
      // 维修数字
      mainInfo: 0,
    }
  },
  onShow() {
    this.loadGoods()
    this.loadUsedGoods()
    this.loadUnusedGoods()
    this.loadMainGoods()
  },
  mounted() {
    this.loadGoods()
    this.loadUsedGoods()
    this.loadUnusedGoods()
    this.loadMainGoods()
  },
  methods: {
    changeTab(val) {
      console.log(val, 'val')
      if (val.detail.name === 1) {
        this.loadGoods(1)
      } else if (val.detail.name === 2) {
        this.loadGoods(2)
      } else if (val.detail.name === 3) {
        this.loadGoods(3)
      } else {
        this.loadGoods()
      }
    },
    handleScrolltolower() {
      this.loadMore()
    },
    loadMore() {
      if (this.finished) {
        return
      }
      this.pageNo++
      this.loadGoods()
    },
    async loadGoods(status) {
      try {
        if (this.pageNo === 1) {
          this.loading = true
        } else {
          this.status = 'loading'
        }
        const res = await getGoodsList({
          pageNo: this.pageNo,
          itemName: this.option.itemName,
          status,
        })
        const { list, total } = res.data
        if (status === 1) {
          this.usedInfo = total
        } else if (status === 2) {
          this.unusedInfo = total
        } else if (status === 3) {
          this.mainInfo = total
        } else {
          this.allInfo = total
        }
        if (this.pageNo === 1) {
          this.allList = list
        } else {
          this.allList = [...this.allList, ...list]
        }
        if (this.allList.length >= total) {
          this.finished = true
          this.status = 'noMore'
        }
      } catch (e) {} finally {
        this.loading = false
      }
    },
    async loadUsedGoods() {
      const res = await getGoodsList({
        pageNo: this.pageNo,
        itemName: this.option.itemName,
        status: 1,
      })
      this.usedInfo = res.data.total
    },
    async loadUnusedGoods() {
      const res = await getGoodsList({
        pageNo: this.pageNo,
        itemName: this.option.itemName,
        status: 2,
      })
      this.unusedInfo = res.data.total
    },
    async loadMainGoods() {
      const res = await getGoodsList({
        pageNo: this.pageNo,
        itemName: this.option.itemName,
        status: 3,
      })
      this.mainInfo = res.data.total
    },
  },
}
</script>
<style lang="scss" scoped>
// .good-scroll{
//   position: absolute;
//   top: 58px;
//   width: 100%;
// }
</style>
<style lang="scss">
.van-sticky{
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
}
[data-index="0"] .van-info{
  background:#739ECA;
}
[data-index="1"] .van-info{
  background:#00D91A;
}
[data-index="2"] .van-info{
  background:#E4A100;
}
[data-index="3"] .van-info{
  background:#FF0000;
}
</style>
